<template>
  <div class="content">
    <!-- <div>{{ zzKey }}</div> -->

    <div class="zzcot">

      <Highlight :class="{ 'last-item': index === content.length - 1 }" highlight-class="custom-class" class="zz_item"
        v-for="(item, index) in content" :keywords="keywords" :source-string="item" />
      <div style="min-height: calc(var(--nav_btn_height) + 1rem);"></div>
    </div>

  </div>
</template>

<script>
import { Highlight } from "vant";
import { selectYudingZhiz } from "../../api/dbUtils";
import { 取六壬直指 } from "../../api/fzzl/zhiZhi";
export default {
  name: "Test",
  async created() {
    await this.initZhizhi();
  },
  components: {
    Highlight,
  },
  data() {
    return {
      kname: {
        name: "gg",
        gs: "ss",
      },
      content: [],
      keywords: [
        "课体",
        "课义",
        "解曰",
        "断曰",
        "天时",
        "家宅",
        "胎产",
        "功名",
        "求财",
        "疾病",
        "失脱",
        "出行",
        "行人",
        "争讼",
        "兵战",
        "毕法云",
        "课经云",
        "纂义云",
        "袖中金云",
        "订讹云",
        "纂要云",
        "心印赋云",
        "括囊赋云",
        "指南",
      ],
    };
  },
  props: {
    zzKey: {
      type: Object, // 指定类型为对象
      required: true, // 是否必传
      // 可选：对象的默认值（必须用函数返回，避免引用类型共享）
    },
  },
  methods: {
    async initZhizhi() {
      console.log(this.zzKey);

      let zz = 取六壬直指(this.zzKey.dgz, this.zzKey.gss)
      console.log(zz);
      this.content = this.splitByNewline(zz)
      // let zhizhi = await selectYudingZhiz(this.zzKey);
      // alert(JSON.stringify(zhizhi.name))
      // let arrkname = zhizhi.name.split("\u3000");
      // this.kname = {
      //   name: arrkname[0],
      //   gs: arrkname[1],
      // };
      // alert(JSON.stringify(zhizhi.content))
      // this.content = JSON.stringify(zhizhi.content).replaceAll('\"', '').replaceAll('\\r\\n', "").split("\u3000");
      // alert(this.content.length)
      // alert(JSON.stringify(content))
      // this.content = this.splitTextByKeywords(
      //   JSON.stringify(zhizhi.content).replaceAll('"', "").replaceAll("\\r\\n", ""),
      //   this.keywords
      // );
    },
    splitTextByKeywords(text, keywords) {
      // 构建正则匹配模式：匹配关键字+冒号，并用捕获组保留关键字
      // 为避免短关键字匹配长关键字（如"课经"匹配"课经云"），按关键字长度倒序排序
      const sortedKeywords = [...keywords].sort((a, b) => b.length - a.length);
      const keywordPattern = sortedKeywords.map((key) => `${key}：`).join("|");
      const regex = new RegExp(`(${keywordPattern})`, "g");

      // 分割文本并保留关键字
      const parts = text.split(regex);

      // 过滤空字符串，组合成"关键字：内容"格式
      const result = [];
      for (let i = 1; i < parts.length; i += 2) {
        const keyPart = parts[i];
        const content = parts[i + 1]?.trim() || ""; // 处理内容部分，去除首尾空白
        if (keyPart) {
          result.push(keyPart + content);
        }
      }

      return result;
    },
    splitByNewline(str, filterEmpty = false) {
      // 处理空字符串：直接返回空数组
      if (typeof str !== 'string') {
        throw new Error('参数必须是字符串');
      }
      if (str === '') {
        return [];
      }

      // 正则匹配所有换行符：\r\n（Windows）、\n（Unix）、\r（旧Mac）
      const newlineRegex = /\r?\n|\r/g;

      // 分割字符串
      let result = str.split(newlineRegex);

      // 可选：过滤空元素（例如连续换行产生的空字符串）
      if (filterEmpty) {
        result = result.filter(item => item.trim() !== '');
      }

      return result;
    }
  },
  watch: {
    zzKey(newValue, oldValue) {
      this.initZhizhi();
    },
  },
};
</script>

<style lang="scss" scoped>
$lcbgc: var(--lr_lcbgc);

.content {
  max-width: 96vw;
  height: calc(100vh - 135rem - var(--safe-top));
  border-radius: 4rem;
  overflow: hidden;
  margin-left: 2vw;
  font-weight: 400;

  .zzcot {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-left: 1vw;
    padding-right: 1vw;
    height: calc(100vh - 135rem - var(--safe-top));
    color: #002c1c;

    .zz_item_tit {
      margin-top: 10rem;
      font-size: 13rem;

      width: 94vw;
    }

    background-color: $lcbgc;
    width: 94vw;

    .zz_item {

      width: 94vw;
      font-size: 14rem;
      padding-top: 5rem;
      padding-bottom: 5rem;
      line-height: 18rem;
      // border-bottom: 2rem dashed var(--lr_lbgc);
      // background-color: #c28585;
      // border-bottom: 1rem solid #ac2424;

    }

  }

  .last-item {
    border-bottom: none !important;
  }
}
</style>